let boxObj = document.getElementById('box');
let smallObj = document.getElementById('small');
let smallImgObj = smallObj.firstElementChild;
let maskObj = smallObj.lastElementChild;
let bigObj = document.getElementById('big');

let bigImgObj = document.getElementById('img')

// 2 给small绑定鼠标移入事件
smallObj.onmouseenter = () => {
  // 2-1 显示mask和大图
  maskObj.style.display = 'block';
  bigObj.style.display = 'block';
}

// 3 鼠标移出消失
smallObj.onmouseleave = () => {
  // 2-1 显示mask和大图
  maskObj.style.display = 'none';
  bigObj.style.display = 'none';
}

//4 鼠标移动则让mask跟随
smallObj.onmousemove = (eve) => {
  // 4-1 获取鼠标的实时位置
  let { pageX, pageY } = eve;
  //   console.log(pageX, pageY);
  // 4-2 获取box的left和top值,计算出鼠标相对于small的坐标

  let tmpX = pageX - boxObj.offsetLeft - maskObj.offsetWidth / 2;
  let tmpY = pageY - boxObj.offsetTop - maskObj.offsetHeight / 2;
  //console.log(boxObj.offsetLeft, boxObj.offsetTop);
  // 4-3 边界的设置
  if (tmpX < 0) tmpX = 0;
  if (tmpY < 0) tmpY = 0;

  // 计算出最大的left和top值
  let maxLeft = smallObj.offsetWidth - maskObj.offsetWidth;
  let maxTop = smallObj.offsetHeight - maskObj.offsetHeight;
  if (tmpX > maxLeft) tmpX = maxLeft;
  if (tmpY > maxTop) tmpY = maxTop;
  // 给mask设置位置
  maskObj.style.left = tmpX + "px";
  maskObj.style.top = tmpY + "px";

  //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
  //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
  //img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
  let bigImgMaxLeft = bigImgObj.offsetWidth - bigObj.offsetWidth;
  let bigimgMaxTop = bigImgObj.offsetHeight - bigObj.offsetHeight;

  // 由公式算出 大图的left和top
  let bigLeft = tmpX / maxLeft * bigImgMaxLeft;
  let bigTop = tmpY / maxTop * bigimgMaxTop;

  // 设置给大图
  bigImgObj.style.left = -bigLeft + 'px';
  bigImgObj.style.top = -bigTop + 'px';}
